<template>
    <div class="page">
       <div class="payType">
            <ul class="flex">
                <li  v-for="(item, index) in payList" :key="item.id" :class="currentIndex == index ? 'on':''" @click="changeType(index,item.id)">
                    <div class="payTit">{{ item.title }}</div>
                    <div class="flex2 payTxt" v-for="i in item.entryCourseSubList" :key="i.id">
                        <span class="justify">{{i.name}}</span>：¥<span>{{i.money}}/{{i.unit}}</span>
                    </div>
                </li>
            </ul>
       </div>
       <div class="bmInfo">
            <div class="bmTit">报名信息</div>
            <van-form @submit="onSubmit">
                <van-field
                    readonly
                    clickable
                    :value="bmInfo.entryClass"
                    label="班级"
                    placeholder="请选择班级"
                    :colon="true"
                    input-align="right"
                    right-icon="arrow"
                    required
                    @click="showPicker = true"
                />
                <van-popup v-model="showPicker" position="bottom">
                    <van-picker
                        show-toolbar
                        :columns="columns"
                        value-key="name"
                        @confirm="onConfirm"
                        @cancel="showPicker = false"
                    />
                </van-popup>
                <van-field
                    v-model="bmInfo.name"
                    name="name"
                    label="学生姓名"
                    placeholder="请填写学生姓名"
                    :colon="true"
                    input-align="right"
                    required
                    :rules="[{ required: true, message: '' }]"
                />
                
                <van-field 
                    name="gender" 
                    label="性别"  
                    :colon="true"
                    input-align="right"
                    required>
                   <template #input>
                        <van-radio-group v-model="bmInfo.gender" direction="horizontal">
                            <van-radio name="1" class="flex2">
                                男
                                <template #icon="props">
                                    <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                                </template>
                            </van-radio>
                            <van-radio name="2" class="flex2">
                                女
                                <template #icon="props">
                                    <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                                </template>
                            </van-radio>
                        </van-radio-group>
                   </template>
                    
                </van-field>
                <van-field
                    v-model="bmInfo.age"
                    name="age"
                    label="年龄"
                    placeholder="请填写年龄"
                    type="number"
                    :colon="true"
                    input-align="right"
                    required
                    :rules="[{ required: true, message: '' }]"
                />
                <van-field
                    v-model="bmInfo.idCard"
                    name="idCard"
                    label="学生身份证"
                    placeholder="请填写学生身份证"
                    :colon="true"
                    input-align="right"
                    required
                    maxlength="18"
                    :rules="[{ required: true, message: '' }]"
                />
                <van-field
                    v-model="bmInfo.parentName"
                    name="parentName"
                    label="家长姓名"
                    placeholder="请填写家长姓名"
                    :colon="true"
                    input-align="right"
                    required
                    :rules="[{ required: true, message: '' }]"
                />
                <van-field
                    v-model="bmInfo.phone"
                    name="phone"
                    label="联系电话"
                    placeholder="请填写联系电话"
                    type="number"
                    :colon="true"
                    input-align="right"
                    required
                    maxlength="11"
                    :rules="telRules"
                />
                <van-button round block color="linear-gradient(134deg, #39C1FF 0%, #0099DE 100%)" native-type="submit" class="btn tjBtn">报名缴费</van-button>
            </van-form>
       </div>
       <div class="goRecord" @click="goRecord">
            <img
                src="../../assets/img/recordBtn.png"
            />
       </div>
    </div>
</template>
<script>
import { index } from "@/https/api";
import { Toast } from "vant";
export default {
    name: "index",
    data() {
        return {
            currentIndex:0,
            payList:[], // 课程
            columns: [], //班级
            showPicker: false,
            bmInfo:{
                entryCourseId:'', //报名课程id
                name:'', //学生名字
                idCard:'', //学生身份证
                gender:'1',  //性别：1男，2女，0未勾选
                age:'', //年龄
                parentName:'', //家长姓名     
                phone:'', //家长电话
                entryClassId:'', //班级id   
                entryClass:'',            
            },
            activeIcon: require('@/assets/img/choseOn.png'),
            inactiveIcon: require('@/assets/img/chose.png'),
            // 校验手机号码
            telRules: [
                {
                    required: true,
                    message: '手机号码不能为空',
                    trigger: 'onBlur'
                }, 
                {
                    // 自定义校验规则
                    validator: value => {
                        return /^1[3|4|5|7|8|9][0-9]{9}$/
                            .test(value)
                    },
                    message: '请输入正确格式的手机号码',
                    trigger: 'onBlur'
                }
            ]
        };
    },
    mounted(){
        this.getData()
       
    },
    methods:{
        // 获取课程列表
        async getData (){
            const res = await index.getCourseList(); 
            if (res.code != 1) return 
            this.payList = res.data
            this.bmInfo.entryCourseId = res.data[0].id
            this.getClassData(res.data[0].id)
        },
        //获取班级
        async getClassData (id){
           const res = await index.getClassList({
            id
           }); 
           if (res.code != 1) return 
           this.columns = res.data.list
        },
        // 选择课程
        changeType(index,id){
            this.currentIndex = index
            this.bmInfo.entryCourseId = id
            this.bmInfo.entryClassId = ''
            this.bmInfo.entryClass = ''
            this.getClassData(id)
        },
        // 
        // 选择班级
        onConfirm(value){
            console.log('选择班级', value);
            this.bmInfo.entryClassId = value.id
            this.bmInfo.entryClass = value.name
            this.showPicker = false
        },
        // 提交
        async onSubmit(){
            Toast.loading({
                message: "加载中...",
            });
            const res = await index.record({
                ...this.bmInfo,
            });
            Toast.clear();
            if(res.code == 1){
                //  支付
                // document.write(res.data)
                const div = document.createElement('div')  //凭空创建div变量
                div.innerHTML = res.data  //后端返回数据
                document.body.appendChild(div)
                document.forms['punchout_form'].submit(); //注意此处的表单提交，与后端返回form表单一致
                div.remove()  
            }else{
                Toast(res.msg);
            }

        },
        // 查看缴费记录
        goRecord(){
            this.$router.push({ path: '/record' });
        }
    }
};
</script>
<style scoped lang="scss">
.payType{
    width: 100%;
    background: #fff;
    padding: .32rem;
    box-sizing: border-box;
    ul{
        flex-wrap: wrap;
        li{
            width: 3.32rem;
            height: 1.88rem;
            background: url('../../assets/img/kuang.png') no-repeat;
            background-size: 100% 100%;
            padding: .24rem .32rem;
            box-sizing: border-box;
            margin-bottom: .24rem;
            .payTit{
                font-size: .32rem;
                color: #09ABF4;
                font-weight: bold;
                text-align: center;
                line-height: .44rem;
                margin-bottom: .12rem;
            }
            .payTxt{
                font-size: .24rem;   
                color: #09ABF4;
                line-height: .4rem;
                span{
                    font-size: .28rem;
                }
                .justify{
                    width: .9rem;
                    text-align-last: justify;
                    display: inline-block;
                }
            }
            &.on{
                background: url('../../assets/img/kuangOn.png') no-repeat;
                background-size: 100% 100%;
                .payTit,.payTxt{
                    color: #fff;
                }
            }
            // &:nth-last-child(-n+2){
            //     margin-bottom: 0;
            // }
        }
    }
}
.bmInfo{
    width: 100%;
    background: #fff;
    padding: .32rem .2rem .8rem;
    box-sizing: border-box;
    margin-top: .24rem;
    .bmTit{
        font-size: .32rem;
        color: #333;
        font-weight: bold;
        padding: 0 .2rem;
    }
    :deep(.van-cell){
        padding: .32rem;
        // font-size: .24rem;
        color: #333;
    }
    .img-icon {
        height: .28rem;
        width: .28rem;
    }
    :deep(.van-radio__icon){
        display: flex;
        align-items: center;
    }
    .tjBtn{
        width: 4.3rem;
        margin: 1.28rem auto 0;
    }
}
.goRecord{
    width: 1.24rem;
    height: 1.2rem;
    position: fixed;
    bottom: 12%;
    right: 0;
    img{
        width: 100%;
        height: 100%;
    }
}
</style>
